<script setup>
import { onMounted, nextTick, ref, reactive, watch, toRefs } from 'vue'
import wavePng from '@/assets/img/海浪.png'
import waveActivePng from '@/assets/img/海浪_active.png'
import windPng from '@/assets/img/海风.png'
import windActivePng from '@/assets/img/海风_active.png'
import tempPng from '@/assets/img/海温.png'
import tempActivePng from '@/assets/img/海温_active.png'
import zengshuiPng from '@/assets/img/bogao.png'
import dysPng from '@/assets/img/dys.png'
const props = defineProps({
  values: {
    type: Array,
    default: [
      {
        name: "潮汐",
        idx: 0,
        src: wavePng,
        src_active: waveActivePng
      },
      {
        name: "海浪",
        idx: 1,
        src: windPng,
        src_active: windActivePng
      },
      {
        name: "海流",
        idx: 2,
        src: tempPng,
        src_active: tempActivePng
      },
      // {
      //   name: "增水",
      //   idx: 4,
      //   src: zengshuiPng,
      //   src_active: zengshuiPng
      // },
      // {
      //   name: "综合",
      //   idx: 5,
      //   src: dysPng,
      //   src_active: dysPng
      // }
    ]
  },
  currentClick: {
    type: Number,
    default: null
  },
  pcData: {
    type: Number,
    default: 0
  }
})

const { values, currentClick, pcData } = toRefs(props)

onMounted(()=>{
})

const emit = defineEmits(['toolClick'])

const sty_active = reactive({
  backgroundColor: '#0A76E2',
  color: '#fff'
})



// const currentClick = ref(null)
const itemClick = (idx) => {
  emit('toolClick', idx)
  // // 重复点击则取消选中
  // if (currentClick.value == idx) {
  //   currentClick.value = null
  //   emit('toolClick', null)
  //   return
  // }
  // currentClick.value = idx
  // emit('toolClick', idx)
}

</script>

<template>
  <div class="measureTools" style="margin-left: 15px;">
    <div class="item" @click="itemClick(3)" :style="currentClick == 3 ? sty_active : ''">
      <div class="nav-img" :style="{ backgroundColor: currentClick == 3 ? '#fff' : '' }">
        <img :src='currentClick == 3 ? windActivePng : windPng' alt="">
      </div>
      <div class="nav-name">海风</div>
    </div>
    <div class="item" v-for="(item, idx) in values" @click="itemClick(item.idx)"
      :style="currentClick == item.idx ? sty_active : ''">
      <div class="nav-img" :style="{ backgroundColor: currentClick == item.idx ? '#fff' : '' }">
        <img :src='currentClick == item.idx ? item.src_active : item.src' alt="">
      </div>
      <div class="nav-name">{{ item.name }}</div>
    </div>
  </div>
</template>

<style lang='less' scoped>
.measureTools {
  position: absolute;
  // left: 455px;
  // top: 5px;
  z-index: 499;

  .item {
    width: 76px;
    height: 36px;
    margin-top: 10px;
    background: #fff;
    -webkit-box-shadow: 0 4px 10px 0 rgba(0, 144, 255, .21);
    box-shadow: 0 4px 10px 0 rgba(0, 144, 255, .21);
    border-radius: 18px;
    padding: 4px;
    cursor: pointer;
    display: flex;
    transition: all .3s ease;

    &:hover {
      box-shadow: 0px 0px 15px #888888;
    }

    .nav-img {
      border-radius: 50%;
      background-color: #d9ecff;
      margin-right: 8px;
      width: 28px;
      height: 28px;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 16px;
        height: 16px;
      }

    }

    .nav-name {
      font-size: 14px;
      line-height: 28px;
    }
  }
}
</style>